<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="../css/dap.css">
</head>

<body>

    <div id="appdd">

        <div class="datepicker">
            <div class="datepicker-header">
                <button @click.stop="prev" class="datepicker-prevbtn" v-bind:class="{ disvisib: !isPrevEnable }"> 上月
                </button>
                <label>{{ month }}</label>
                <button @click.stop="next" class="datepicker-nextbtn" v-bind:class="{ disvisib: !isNextEnale }">下月</button>
            </div>
            
            <div class="datepicker-body">
                <table cellspacing="0">
                    <tbody>
                        <tr>
                            <th style="color:red">日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th style="color:red">六</th>
                        </tr>

                        <tr v-for="row in [0,1,2,3,4,5]" class="datepicker-dayrow">
                            <td v-for="column in [0,1,2,3,4,5,6]" v-bind:class="[  cells[row * 7 + column].type, getCellPostClass(cells[row * 7 + column])]"
                                v-on:click.stop="clickDay(cells[row * 7 + column])">
                                {{ cells[row * 7 + column].text }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="datepicker-footer">
                <button class="datepicker-todaybtn" @click.stop="changeToToday">回到今天</button>
            </div>
        </div>
    </div>





</body>


<script src="../js/vue.js" type="text/javascript" charset="utf-8"> </script>
<script type="text/javascript">      


    new Vue({
        el: '#appdd',
        data: {
            dateShow: new Date(),
            isEnablePost: false,
            isPrevEnable: true,
            isNextEnale: true,
        },

        computed: {
            cells() {
                return this.mkcells(this.dateShow);
            },
            month() {
                return this.dateShow.getFullYear() + "-" + (this.dateShow.getMonth() + 1);
            },
        },

        methods: {
            clickDay(cell) {
                if ('normal' === cell.type) {
                    if (this.isEnablePost || !this.isCellPost(cell)) {
                        var datePick = new Date(this.dateShow);
                        datePick.setDate(cell.text);
                        alert(this.getFormatDate(datePick));
                    }
                }
            },

            getCellPostClass(cell) {
                if (this.isEnablePost) {
                    return '';
                }

                if ('normal' === cell.type && this.isCellPost(cell)) {
                    return 'post-date';
                }

                return '';
            },

            isCellPost(cell) {
                if (this.dateShow.getTime() > new Date().getTime()) {
                    return false;
                }

                if (this.dateShow.getFullYear() < new Date().getFullYear()
                    || this.dateShow.getMonth() < new Date().getMonth()) {
                    return true;
                }

                return (cell.text < new Date().getDate());
            },

            changeToToday() {
                this.dateShow = new Date();
            },
            prev() {

                this.dateShow = this.prevMonth(this.dateShow);
            },

            next() {
                this.dateShow = this.nextMonth(this.dateShow);
            },

            getFormatDate(date) {
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();

                month = (month > 0 && month <= 9) ? ('0' + month) : month;
                strDate = (strDate > 0 && strDate <= 9) ? ('0' + strDate) : strDate;

                return year + seperator1 + month + seperator1 + strDate;
            },

            getDayCountOfMonth(year, month) {
                if (month === 3 || month === 5 || month === 8 || month === 10) {
                    return 30;
                }

                if (month === 1) {
                    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
                        return 29;
                    } else {
                        return 28;
                    }
                }

                return 31;
            },

            getFirstDayOfMonth(date) {
                var temp = new Date(date.getTime());
                temp.setDate(1);
                return temp.getDay();
            },

            prevMonth(dateIn) {
                var date = new Date(dateIn);
                var year = date.getFullYear();
                var month = date.getMonth();

                var newYear = month === 0 ? year - 1 : year;
                var newMonth = month === 0 ? 11 : month - 1;

                date.setMonth(newMonth);
                date.setFullYear(newYear);
                return date;
            },

            nextMonth(dateIn) {
                var date = new Date(dateIn);
                var year = date.getFullYear();
                var month = date.getMonth();

                var newYear = month === 11 ? year + 1 : year;
                var newMonth = month === 11 ? 0 : month + 1;

                date.setMonth(newMonth);
                date.setFullYear(newYear);
                return date;
            },

            mkcells(date) {
                var day = this.getFirstDayOfMonth(date);
                var maxDay = this.getDayCountOfMonth(date.getFullYear(), date.getMonth());
                var lastMonthDay = this.getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));

                day = (day === 0 ? 7 : day);

                var cells = [];
                var count = 1;
                // var firstDayPosition;

                for (var i = 0; i < 6; i++) {
                    for (var j = 0; j < 7; j++) {
                        var cell = { row: i, column: j, type: 'normal' };
                        if (i === 0) {
                            if (j >= day) {
                                cell.text = count++;
                                // if (count === 2) {
                                //     firstDayPosition = i * 7 + j;
                                // }
                            } else {
                                cell.text = lastMonthDay - (day - j % 7) + 1;
                                cell.type = 'prevmonth';
                            }
                        } else {
                            if (count <= maxDay) {
                                cell.text = count++;
                                // if (count === 2) {
                                //     firstDayPosition = i * 7 + j;
                                // }
                            } else {
                                cell.text = count++ - maxDay;
                                cell.type = 'nextmonth';
                            }
                        }
                        cells.push(cell);
                    }
                }

                // cells.firstDayPosition = firstDayPosition;

                return cells;
            },
        }
    })




</script>

</html>